<template>
  <div class="content">
    <div class="header">
      <span>各班组今日出勤人数统计</span>
      <a href="" class="more">更多</a>
    </div>
    <div class="body">
      <div id="bar" style="width:100%;height:260px" />
    </div>
  </div>
</template>

<script>
import { barChartTeamData } from '@/api/autonym'
export default {
  data() {
    return {
      list: [],
      datax: [],
      datay: []
    }
  },
  created() {},
  mounted() {
    this.getDetail()
  },
  methods: {
    async getDetail() {
      const res = await barChartTeamData()
      if (res.code === 200) {
        if (res.data) {
          this.list = res.data
          if (this.list) {
            this.list.forEach((val, index, arr) => {
              this.datax.push(val.teamName)
              this.datay.push(val.count)
            })
          }
          this.$nextTick(function() {
            this.barInit()
          })
        }
      }
    },
    barInit() {
      const myChart = this.$echarts.init(document.getElementById('bar'))
      const option = {
        grid: {
          left: '5%',
          right: '1%',
          top: '5%',
          bottom: '10%'
        },
        color: ['rgba(247, 181, 0, 0.85)'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        xAxis: [
          {
            type: 'category',
            data: this.datax,
            axisTick: {
              alignWithLabel: true
            },
            axisLine: { // 坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                // color: '#ffffff'
              }
            },
            axisLabel: { // 坐标轴刻度标签的相关设置
              textStyle: {
                color: '#ffffff'
              }
            },
            itemStyle: {
              borderType: 'dashed'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: 'rgba(255,255,255,0.1)'
              }
            },
            axisLine: { // 坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                // color: '#ffffff'
              }
            },
            axisLabel: { // 坐标轴刻度标签的相关设置
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: '40%',
            data: this.datay
          }
        ]
      }
      myChart.setOption(option, (window.onresize = myChart.resize))
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  border-radius: 2px;
  .header {
    margin-bottom: 10px;
    color: white;
    .more {
      float: right;
      color: rgba(247, 181, 0, 1);
    }
  }
}
</style>
